<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"><head>
<head>
    <div th:replace="block/head"></div>
    <link rel="stylesheet" th:href="@{/static/layuimini/js/lay-module/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/static/layuimini/js/lay-module/dtree/font/dtreefont.css}">

    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="add" shiro:hasPermission="system:deptInfo:save">新增部门</button>
                <button class="layui-btn layui-btn-sm" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-sm" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table" style="margin: 0;"></table>
        </div>
    </div>
</div>

<div id="dataFormModal" class="straw-layer">
    <form class="layui-form" id="dataForm" lay-filter="dataFormFilter">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">上级部门</label>
            <div class="layui-input-block">
                <input type="text" placeholder="主目录" autocomplete="off" id="pidText" class="layui-input" readonly>
                <input type="hidden" name="pid" id="pid" value="0" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入部门名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" lay-verify="required" value="0" placeholder="请输入排序" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="remark" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="dataFormSubmit">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="dataFormReset">取消</button>
            </div>
        </div>
    </form>
</div>

<div th:replace="block/js"></div>
<script th:inline="javascript">
    let deptInfoUpdate = false;
    let deptInfoDelete = false;
</script>
<script shiro:hasPermission="system:deptInfo:update">deptInfoUpdate = true;</script>
<script shiro:hasPermission="system:deptInfo:delete">deptInfoDelete = true;</script>
<script th:inline="javascript">
    layui.use(['table', 'treetable', 'iconPickerFa', 'dtree', 'form'], function () {
        let $ = layui.jquery,
            table = layui.table,
            iconPickerFa = layui.iconPickerFa,
            dtree = layui.dtree,
            form = layui.form,
            treetable = layui.treetable;

        let active = {
            dataModelType: 1,
            openDataFormModal() {
                let title = active.dataModelType == 1 ? '新增表单' : '编辑表单';
                layer.open({
                    title: title
                    , type: 1
                    , content: $('#dataFormModal')
                    , area: ['600px', '400px']
                    , maxmin: true
                    , cancel: function () {
                        active.closeDataFormModal();
                    }
                });
            },
            closeDataFormModal() {
                $('#dataForm')[0].reset();
                $("#pid").val('0');
                layer.closeAll();
            },
        };

        // 渲染表格
        treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'pid',
            elem: '#munu-table',
            url: '/system/deptInfo/listByTable',
            page: false,
            cols: [ [
                {type: 'numbers'},
                {field: 'name', title: '部门名称'},
                {field: 'remark', title: '备注'},
                {field: 'sort', align: 'center',  width: 60, title: '排序'},
                { width: 130, align: 'center', title: '操作', templet: function (d) {
                        let dom = '';
                        if (deptInfoUpdate) dom += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>';
                        if (deptInfoDelete) dom += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return dom;
                    }}
            ]]
        });

        // 选择上级目录
        $('#pidText').on('click', function () {
            layer.open({
                type: 1,
                title: "选择上级部门",
                area: ["400px", "80%"],
                content: '<ul id="openTree" class="dtree" data-id="0"></ul>',
                btn: ['确认选择'],
                success: function (layero, index) {
                    let dataTree = dtree.render({
                        elem: "#openTree",
                        url: "/system/deptInfo/listByDTree",
                        menubar: true,
                        done: function (data, obj, first) {
                            dtree.dataInit("openTree", $("#pid").val().toString());
                        }
                    });
                    // 绑定节点的双击
                    dtree.on("nodedblclick('openTree')", function (obj) {
                        $("#pid").val(obj.param.nodeId);
                        $("#pidText").val(obj.param.context);
                        layer.close(index);
                    });
                },
                yes: function (index, layero) {
                    let param = dtree.getNowParam("openTree");
                    $("#pid").val(param.nodeId);
                    $("#pidText").val(param.context);
                    layer.close(index);
                }
            });
        });

        $('#add').on('click', function () {
            active.dataModelType = 1;
            active.openDataFormModal();
        });

        // 展开/折叠
        $('#btn-expand').on('click', function () {
            treetable.expandAll('#munu-table');
        });
        $('#btn-fold').on('click', function () {
            treetable.foldAll('#munu-table');
        });

        // 监听行按钮
        table.on('tool(munu-table)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            if (layEvent === 'edit') {
                // 回显数据
                active.dataModelType = 2;
                form.val('dataFormFilter', data);
                $("#pidText").val(data.pidName);
                active.openDataFormModal();
            } else if (layEvent === 'del') {
                layer.confirm('确定删除该数据吗？', function (index) {
                    $.ajax({
                        type: 'post',
                        url: '/system/deptInfo/deleteById',
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.msg, {time: 2000, icon: 1}, function () {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {time: 2000, icon: 2});
                            }
                        },
                        error: function (res) {
                            layer.msg('请求失败', {time: 2000, icon: 2});
                        }
                    });
                });
            }
        });

        // 监听表单取消
        $('#dataFormReset').on('click', function () {
            active.closeDataFormModal();
        });
        //监听表单提交
        form.on('submit(dataFormSubmit)', function (data) {
            $.ajax({
                type: 'post',
                url: active.dataModelType == 1 ? '/system/deptInfo/save' : '/system/deptInfo/updateById',
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg, {time: 2000, icon: 1}, function () {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {time: 2000, icon: 2});
                    }
                },
                error: function (res) {
                    layer.msg('请求失败', {time: 2000, icon: 2});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
